<template>
  <div>
    <div class="form">
      <el-form
        :model="userInfo"
        :rules="rules"
        ref="userInfo"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="昵称" prop="nickname" v-if="userInfo !== undefined">
          <el-input v-model="userInfo.nickname"></el-input>
        </el-form-item>

        <el-form-item label="所属院系" required>
          <el-col :span="11">
            <el-form-item prop="collegeId">
              <el-select
                filterable
                v-model="userInfo.collegeId"
                placeholder="请选择学院"
                @change="colleageChanged(userInfo.collegeId)"
              >
                <el-option
                  v-for="(item, index) in collegeAndMajor"
                  :key="index"
                  :label="item.collegeName"
                  :value="item.collegeId"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col class="line" :span="2" style="text-align: center">-</el-col>
          <el-col :span="11">
            <el-form-item prop="majorId">
              <el-select v-model="userInfo.majorId" placeholder="请选择专业">
                <el-option
                  filterable
                  v-for="(item, index) in majorList"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item label="手机号" prop="phone" v-model="userInfo.phone">
          <el-input
            v-model.number="userInfo.phone"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-radio-group v-model="userInfo.gender">
            <el-radio :label="0">男</el-radio>
            <el-radio :label="1">女</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="个人简介" prop="description">
          <el-input type="textarea" v-model="userInfo.description"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="submitForm('userInfo')"
            :disabled="saveBtnDisabled"
            >保存</el-button
          >
          <el-button @click="resetForm('userInfo')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
//import user from "@/api/user.js";
import { queryToken } from  "../../api/user";
import { collegeQueryAll } from "../../api/user";
import { saveUserInfo } from "../../api/user";
//import userApi from "@/api/login";
//import cookie from "js-cookie";

export default {
  data() {
    return {
      token: "",
      saveBtnDisabled: false, // 保存按钮是否禁用
      collegeAndMajor: "", //学院以及专业信息
      majorList: [], //专业列表
      userInfo: {
        phone: "",
        nickname: "",
        gender: "",
        description: "",
        majorId: "",
        collegeId: "",
      },
      rules: {
        nickname: [
          {
            required: true,
            message: "请输入昵称",
            trigger: "blur",
          },
          {
            min: 3,
            max: 5,
            message: "长度在 3 到 5 个字符",
            trigger: "blur",
          },
        ],
        collegeId: [
          {
            required: true,
            message: "请选择学院",
            trigger: "blur",
          },
        ],
        majorId: [
          {
            required: true,
            message: "请选择专业",
            trigger: "blur",
          },
        ],
        phone: [
          {
            required: true,
            message: "请输入手机号",
            trigger: "blur",
          },
          {
            pattern: /^1[3456789]\d{9}$/,
            message: "手机号码格式不正确",
          },
        ],
        gender: [
          {
            required: true,
            message: "请选择性别",
            trigger: "blur",
          },
        ],
        description: [
          {
            required: true,
            message: "请填写个人简介",
            trigger: "blur",
          },
          {
            min: 3,
            max: 20,
            message: "长度在 3 到 20 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  mounted() {
    this.initForm();
  },
  methods: {
    handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
    colleageChanged(value) {
      for (let i = 0; i < this.collegeAndMajor.length; i++) {
        if (this.collegeAndMajor[i].collegeId === value) {
          this.majorList = this.collegeAndMajor[i].majorList;
          this.userInfo.majorId = "";
        }
      }
    },
    initForm() {
      queryToken().then((res2) => {
        this.userInfo = res2.data.data.user;
        //初始化majorList
        collegeQueryAll().then((res) => {
          this.collegeAndMajor = res.data.data.collegeAndMajor;
          for (let i = 0; i < this.collegeAndMajor.length; i++) {
            if (this.collegeAndMajor[i].collegeId === this.userInfo.collegeId) {
              this.majorList = this.collegeAndMajor[i].majorList;
            }
          }
        });
      });
    },
    submitForm(formName) {
      this.saveBtnDisabled = true;//点提交的时候，按钮改为禁用
      this.$refs[formName].validate((valid) => {
        if (valid) {
        saveUserInfo(this.userInfo).then((res) => {
            this.$message.success("保存成功");
            this.token = res.data.data.token;

            window.location = "/?token=" + this.token;
          });
        } else {
          this.$message.error();
          ("保存失败，请稍后重试");
          this.saveBtnDisabled = false;
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>
<style scoped>
.form {
  margin: 20px;
  padding: 40px;
  padding-right: 80px;
  border-radius: 20px;
  border: 2px solid skyblue;
  background-color: cornsilk;
}
</style>